import * as React from 'react';
import * as PropTypes from 'prop-types';
import { Button, Form, Input } from 'antd';
import { FormComponentProps } from 'antd/es/form';
import EquTable from './index';

export interface PageProps extends FormComponentProps {}

class Page extends React.Component<PageProps, any> {
  public static propTypes = {};
  public static defaultProps = {};

  public render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const dataObj = {
      account: '', // 'hbwsrf@163.com',
      data: [
        // { id: '-1638161955315', ownNet: '', dbh: '', description: '哈哈哈哈', checked: true },
        // { id: '-1638161917769', ownNet: '', dbh: '', description: '没有人', checked: true },
        // { id: '-1638161915587', ownNet: '', dbh: '', description: '一个也不能少', checked: true },
      ],
    };
    return (
      <div style={{ width: 900, margin: '10px auto' }}>
        <Form {...formItemLayout} onSubmit={this.handleSubmit}>
          <Form.Item label="帐户">
            {getFieldDecorator('account', {
              rules: [{ required: true, message: '请输入你的帐户' }],
              initialValue: dataObj.account,
            })(<Input placeholder="用户名/手机/邮箱" />)}
          </Form.Item>
          <Form.Item label="设备">
            {getFieldDecorator('data', {
              rules: [{ required: true, message: '请输入你的设备信息' }],
              valuePropName: 'dataSource',
              trigger: 'onChange',
              initialValue: dataObj.data,
            })(<EquTable onEquSelect={this.handleEquSelect} />)}
          </Form.Item>
          <Form.Item
            wrapperCol={{
              xs: { span: 24, offset: 0 },
              sm: { span: 16, offset: 8 },
            }}
          >
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }

  public handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        console.error(err);
        return;
      }
      console.log(values);
    });
  };

  private handleEquSelect = () => {
    console.log('选择数据');
  };
}

export default Form.create()(Page);
